<template>
    <div class="setting">
        <c-header leftText="返回"></c-header>
        <div class="information">
            <van-form @submit="onSubmit">
                <van-field name="uploader" label="文件上传">
                    <template #input>
                        <van-uploader v-model="uploader" :max-count="1" :after-read="afterRead" name="pic" />
                    </template>
                </van-field>
                <van-field v-model="userInfo.nickname" name="nickname" label="业主名" placeholder="业主名" :rules="[{ required: true, message: '请填写业主名' }]" />
                <van-field v-model="userInfo.phone" name="phone" label="手机号" placeholder="手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">修改信息</van-button>
                </div>
            </van-form>
        </div>
        <van-button type="danger" block @click="loginOut">退出登录</van-button>
    </div>
</template>

<script>
import api from "../../api";
export default {
    name: "setting",
    data() {
        return {
            uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
            userInfo: {},
        };
    },
    mounted() {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.uploader[0].url = this.userInfo.avatar || "";
    },
    methods: {
        async afterRead(file, name) {
            var formData = new FormData();
            formData.append(name.name, file.file);
            const response = await api.upload.uploadImage(formData);
            if (response.data.code === 10000) {
                this.userInfo.avatar = response.data.data;
                this.uploader[0].url = response.data.data;
                this.$Toast("上传成功");
            } else {
                this.$Toast("上传失败");
            }
        },
        async onSubmit() {
            const response = await api.user.editUser(this.userInfo);
            if (response.data.code === 200) {
                localStorage.setItem("userInfo", JSON.stringify(this.userInfo));
                this.$Toast("修改成功");
            } else {
                this.$Toast("修改失败");
            }
        },
        loginOut() {
            localStorage.clear();
            this.$router.replace("/login");
        },
    },
};
</script>

<style lang='less' scoped>
.setting {
    .information {
        display: flex;
        flex-direction: column;
        padding: 1rem 0.5rem;
        .item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            min-height: 3rem;
            .img-name {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-left: 1rem;
                .username {
                    font-size: small;
                    margin-left: 0.5rem;
                }
            }
        }
    }
}
</style>